
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { Header } from 'src/components'
import { RETSET_NAME } from 'src/redux/action-type'
import classNames from 'classnames'
import './index.scss'

const SetUserName = () => {
    const dispatch = useDispatch()
    const history = useHistory(0)
    const [earn, setearn] = useState(true)     //输入框提醒
    const [bordercolor, setBordercolor] = useState(false)  //输入框边框颜色
    const [opacityall, setOpacityall] = useState(false)   //字体透明度
    const [inputValue, setInputValue] = useState('')       //输入框的内容

    const inputThing = (value) => {
        if (value.length < 5 || value.length > 24) {
            setearn(false)
            setBordercolor(true)
            setOpacityall(false)
            return false;
        } else {
            setearn(true)
            setBordercolor(false)
            setOpacityall(true)
            return true;
        }
    }

    const resetName = () => {
        let checkResult = inputThing();
        if (!checkResult) {
            return;
        }
        dispatch({
            type: RETSET_NAME,
            username: inputValue
        })
        history.go(-1);
    }
    return <div className="page_profile_info_setusername">
        <Header title="修改用户名" goBack></Header>
        <section className="setname">
            <section className="setname-top">
                <input type="text"
                    placeholder="输入用户名"
                    className={classNames({ 'setname-input': bordercolor })}
                    onInput={(e) => {
                        inputThing(e.target.value)
                        setInputValue(e.target.value)
                    }}
                    value={inputValue}
                />
                <div>
                    {
                        earn ? <p>用户名只能修改一次（5-24字符之间）</p> : <p className="unlikep">用户名长度在5到24位之间</p>
                    }
                </div>
            </section>
            <section className="reset">
                <button className={classNames({ fontopacity: opacityall })} onClick={resetName}>确认修改</button>
            </section>
        </section>
    </div>
}

export default SetUserName